<template>
  <div class="personal-container">
   <el-button type="primary" icon="el-icon-plus" style="margin-bottom:20px;margin-left: 15px;" @click="upload">上传</el-button>
   <div class="peagename">Show  
        <el-select v-model="value"  @change="pagenumber" style="width:80px;height: 35px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      >
    </el-option>
  </el-select>
        entries</div>
     <el-table
    :data="tableData"
    stripe
        border
    style="width: 90% ; margin:auto ">
    <el-table-column
      prop="date"
      label="文件名"
      width="340">
    </el-table-column>
    <el-table-column
      prop="name"
      label="大小"
      width="340">
    </el-table-column>
    <el-table-column
      prop="address"
     width="340"
      label="创建时间">
    </el-table-column>
   <el-table-column
      fixed="right"
      label="操作"
      >
      <template >
        <el-button  type="text" size="small" icon="el-icon-download"></el-button>
 
      </template>
    </el-table-column>
  </el-table>
    <div class="footer"> <div class="page-weng">Showing {{go}} to {{to}} of 13 entries</div>
      <div class="page">
      <el-pagination
  background
  :page-size="value"
  layout="prev, pager, next"
  :total="100"
  @current-change="currentpage"
  >
  
</el-pagination>
</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    
         tableData: [{
          date: '2016-05-02',
          name: '虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        options: [{
          value: 10,
          label: '10'
        }, {
          value: 25,
          label: '25'
        }, {
          value: 50,
          label: '50'
        }, {
          value: 100,
          label: '100'
        },],
        value: 10,
        go:"1",
        to:"10",
        value2:"1"
      
    }
  },
  methods:{
      currentpage(value){
        this.value2=value
        this.go=this.value*this.value2-this.value+1
        this.to=this.value*this.value2
      },
      pagenumber(){
    this.to=this.value*this.value2
},
 upload(){
   this.$emit("upload")
 }
  }
 

}
</script>

<style lang="scss" scoped>
@import "../../../styles/from.scss";
.personal-container{
    width: 100%;
    padding-top: 15px;
    height: 500px;
    background: white;
 
}
.personal-from{

}
</style>